<template>
	<view class="warp">
		<top-nav title="备份助记词"></top-nav>
		<view class="title">
			请按顺序抄写助记词，<br>确保备份正确
		</view>
		<view class="content">
			<view class="list" v-for="(item,index) in list" :class="index==10||index==11||index==9?'noborder':''">
				<view class="info">{{item}}</view>
			</view>
		</view>
		<view class="desc">
			1、妥善保管助记词至隔离网络的安全地方 <br>
			2、请勿将助记词在联网环境下分享和存储，比如邮件、相册、社交应用等。<br>
		</view>
		<view class="bottom">
			<my-button @clickFun="clickFun">确定</my-button>
		</view>
	</view>
</template>

<script>
	import topNav from 'components/top-nav/top-vue.vue';
	import button from './components/button.vue'
	export default{
		data(){
			return{
				inputClass:{
					color:'#ffffff',
					fontSize: '36rpx'
				},
				list:[]
			}
		},
		created(){
			this.list = uni.getStorageSync('master_key');
		},
		components:{
			'topNav':topNav,
			'myButton': button
		},
		methods:{
			clickFun(){
				uni.navigateTo({
				    url: '/pages/login/step5?type=login'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warp{
		padding: 0 37*2rpx;
		.title{
			font-size:24*2rpx;
			margin:30*2rpx 0 18*2rpx;
			font-size: 24*2rpx;
		}
		.content{
			display: flex;
			flex-wrap: wrap;
			background-color: #F1F1F1;
			text-align: center;
			.list{
				flex:1 0 33.33%;
				background-color: rgba(0,0,0,0.9);
				border-bottom:1rpx solid #F1F1F1;
				box-sizing: border-box;
				height:60*2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				&:not(:nth-child(3n+3)){
					border-right:1rpx solid #F1F1F1;
				}
				&.noborder{
					border-bottom:0;
					height:70*2rpx;
				}
				.info{
					flex:1;
					margin:0 20rpx;
					height:25*2rpx;
					line-height:25*2rpx;
					font-size:12*2rpx;
					background-color: rgba(255,255,255,0.1);
					border-radius: 25rpx;
				}
			}
		}
		.desc{
			margin:40rpx 0 120*2rpx;
			font-size:12*2rpx;
		}
		.bottom{
			height:110*2rpx;
			background-color: #202020;
			width: 100%;
			bottom: 0;
			position: fixed;
			left:0;
		}
	}
</style>
